<template>



	<z-paging ref="paging" class="z-paging page_bg" v-model="courseList" @query="getMyCourseList"
		:hide-loading-more-when-no-more-by-limit="5">

		<!-- 		<view slot="top">
			<u-tabs-swiper style="margin-bottom: 10rpx;" ref="tabs" :list="list" :current="current" @change="tabsChange"
				:is-scroll="false"></u-tabs-swiper>
		</view> -->

		<view class="flex-row course_item" v-for="item in courseList" :key="item._id">
			<u-image :src="item.courseInfo.thumb" :lazy-load="true" class="image_2" mode="aspectFill"
				v-if="item.courseInfo!=null"></u-image>
			<view class="flex-col group_3">
				<text class="text_1">{{item.courseInfo.title}}</text>
				<view class="justify-between group_4">
					<text class="text_2" v-if="item.courseInfo.videos">共{{item.courseInfo.videos.length}}节课</text>
					<view class="right-text-wrapper flex-col items-center view" @click="goToLearn(item.courseInfo)">
						马上学习
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</z-paging>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				courseList: [],
				list: [{
					name: '点播课程',
					type: 'course'
				}],
				current: 0, // tabs组件的current值，表示当前活动的tab选项

			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {},
			tabsChange(index) {
				this.current = index;
				this.$refs.paging.reload();
			},
			// 我的课程列表
			getMyCourseList(pageNo, pageSize) {
				vk.callFunction({
					url: 'client/learn/pub/myCourseList',
					title: '加载中',
					data: {
						pageIndex: pageNo,
						pageSize: pageSize,
						need_user_info: true,
						type: this.list[this.current].type
					},
					success(data) {
						that.$refs.paging.complete(data.rows);
					}
				});
			},
			// 前往学习
			goToLearn(info) {
				if (info.videos.length < 1) {
					this.$refs.uToast.show({
						title: '当前课程没有更多视频',
						type: 'warning',
					})
					return
				}
				if (this.list[this.current].type == "course") {
					let url =
						`/uni_modules/uce-course/pages/video/startWatchVideo?course_id=${info._id}&video_id=${info.videos[0]._id}`
					uni.vk.navigateTo(url)
				} else {
					uni.vk.navigateTo('/uni_modules/uce-course/pages/detail/live-class-detail?_id=' + info._id, false);

				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page_bg {
		padding: 0rpx 20rpx 0;
	}

	.course_item {
		margin-bottom: 60rpx;
	}

	.image_2 {
		border-radius: 8rpx;
		width: 284rpx !important;
		height: 182rpx !important;
	}

	.group_3 {
		margin-left: 26rpx;
		margin-right: 7rpx;
		flex: 1 1 auto;

		.text_1 {
			color: rgb(51, 51, 51);
			font-size: 30rpx;
			line-height: 35rpx;
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.group_4 {
			margin-top: 57rpx;

			.text_2 {
				margin-top: 25rpx;
				color: rgb(153, 153, 153);
				font-size: 24rpx;
				line-height: 29rpx;
				white-space: nowrap;
			}

			.right-text-wrapper {
				color: rgb(255, 255, 255);
				font-size: 24rpx;
				line-height: 29rpx;
				white-space: nowrap;
				padding: 14rpx 0 12rpx;
				background-color: rgb(51, 51, 51);
				border-radius: 27rpx;
				width: 160rpx;
				height: 54rpx;
				margin-right: 6rpx;
			}
		}
	}
</style>